<template>
  <div class="container">
      <div class="card">
          <el-breadcrumb separator="/" class="card-body">
              <el-breadcrumb-item :to="{ path: '/AdminHome' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/AssetsManagement' }">设备管理</el-breadcrumb-item>
              <el-breadcrumb-item>{{ this.$route.meta.title }}</el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <div class="card">
          <div class="card-header">
              修改设备信息
              <div class="f-right">
                  <el-button type="warning" icon="el-icon-printer">打印</el-button>
              </div>
          </div>
          <div class="card-body">
              <el-form :model="DeviceData" :rules="rules" ref="DeviceData" label-width="120px">
                  <el-tabs v-model="activeName">
                      <el-tab-pane label="通用信息" name="first">
                          <div class="info-ruleForm">
                              <el-form-item label="编号" prop="code">
                                  <el-input v-model="DeviceData.code" disabled></el-input>
                              </el-form-item>
                              <el-form-item label="设备名称" prop="name">
                                  <el-input v-model="DeviceData.name"></el-input>
                              </el-form-item>
                              <el-form-item label="入库时间" prop="createAt">
                                  <el-date-picker v-model="DeviceData.createAt" type="datetime" placeholder="选择日期时间">
                                  </el-date-picker>
                              </el-form-item>
                              <!-- <el-form-item label="责任人" prop="principalName">
                                  <el-input v-model="DeviceData.principalName"></el-input>
                              </el-form-item> -->
                              <!-- <el-form-item label="密级" prop="secretLevel">
                                    <el-select v-model="DeviceData.secretLevel" placeholder="涉密级别">
                                        <el-option :label="lv.label" :value="lv.code" v-for="lv in LevConfig" :key="lv.index"></el-option>
                                    </el-select>
                                </el-form-item> -->
                              <!-- <el-form-item label="当前设备状态" prop="status">
                                  <el-select v-model="DeviceData.status" placeholder="当前设备状态">
                                      <el-option :label="s.label" :value="s.code" v-for="s in StaConfig" :key="s.index"></el-option>
                                  </el-select>
                              </el-form-item> -->
                              <!-- 
                                <el-form-item label="所属部门" prop="departmentName">
                                    <el-input v-model="departmentName" ref="czbm"></el-input>
                                    <el-button @click="$tree('查找组织','czbm')" type="text" size="medium" class="el-query-tree">查找</el-button>
                                </el-form-item>
                                <el-form-item label="储存位置" prop="storageName">
                                    <el-input v-model="storageName"  ref="ccwz"></el-input>
                                    <el-button type="text" size="medium" class="del-query-tree-btn" @click="$tree('查找储存位置','ccwz')">查找</el-button>
                                </el-form-item>
                                -->
                              <SupplierPicker v-on:getSupplierId="setSupplierId"></SupplierPicker>
                              <el-form-item label="库存数量" prop="storageNum">
                                  <el-input v-model.trim="DeviceData.storageNum" type="number"></el-input>
                              </el-form-item>
                              <el-form-item label="库存预警数" prop="storageWarnNum">
                                  <el-input v-model.trim="DeviceData.storageWarnNum" type="number"></el-input>
                              </el-form-item>
                          </div>
                      </el-tab-pane>
                      <el-tab-pane label="设备属性" name="second">

                          <el-form :model="SubmitForm" ref="SubmitForm" label-width="120px">
                              <div class="info-ruleForm">
                                  <el-form-item label="分类">
                                      <el-cascader :options="options" v-model="selectedOptions" :props="defaultProps" @change="handleChange">
                                      </el-cascader>
                                  </el-form-item>
                                  <el-form-item :label="item.propertyName" v-for="(item,index) in loadForm" :key="index">
                                      <el-input v-if="item.formName == 'input'" v-model="DeviceData.devicePropertyValue[index].formValue"></el-input>
                                      <el-radio-group v-if="item.formName == 'radio'" v-model="DeviceData.devicePropertyValue[index].formValue">
                                          <el-radio v-for="val in toArray(item.optionalValue)" :label="val" :key="val.index"></el-radio>
                                      </el-radio-group>
                                      <el-checkbox-group v-if="item.formName == 'checkbox'" v-model="DeviceData.devicePropertyValue[index].formValue">
                                          <el-checkbox :label="val" :name="SubmitForm[item.propertyName]" v-for="val in toArray(item.optionalValue)" :key="val.index"></el-checkbox>
                                      </el-checkbox-group>
                                  </el-form-item>
                              </div>
                          </el-form>
                      </el-tab-pane>
                  </el-tabs>
                  <hr>
                  <el-form-item>
                      <el-button type="primary" @click="submitForm('DeviceData')" :disabled="disabled">立即保存</el-button>
                      <el-button @click="goBack()">返回</el-button>
                  </el-form-item>
              </el-form>
              {{DeviceData.devicePropertyValue}}
          </div>
      </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import config from "@/config/index";
import SupplierPicker from "./components/SupplierPicker";
export default {
  name: "DeviceCreate",
  components: {
    SupplierPicker
  },
  data() {
    return {
      activeName: "first",
      disabled: false,

      options: [],
      selectedOptions: [],
      defaultProps: { value: "id" },

      LevConfig: "",
      StaConfig: "",

      loadForm: "",

      SubmitForm: [],

      DeviceData: {
        code: "",
        createAt: "",
        createBy: "",
        departmentId: 1,
        departmentName: "",
        deviceStatus: "1",
        id: "",
        name: "",
        principalId: "",
        principalName: "",
        secretLevel: "",
        specification: "",
        status: "",
        storageId: "",
        storageNum: "",
        storageWarnNum: "",
        supplierId: "",
        supplierName: "",
        typeId: "",
        typeName: "",
        devicePropertyValue: []
      },
      rules: {
        code: [{ required: true, message: "未获取设备编号", trigger: "blur" }],
        createAt: [
          { required: true, message: "请输入选择入库时间", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入设备名称", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" }
        ],
        principalName: [
          { required: true, message: "请输入责任人", trigger: "blur" },
          { min: 1, max: 15, message: "长度在 1 到 15 个字符", trigger: "blur" }
        ],
        secretLevel: [
          { required: true, message: "请选择密级", trigger: "blur" }
        ],
        status: [
          { required: true, message: "请选择设备状态", trigger: "blur" }
        ],
        storageNum: [
          { required: true, message: "请输入当前库存数量", trigger: "blur" }
        ],
        storageWarnNum: [
          { required: true, message: "请输入库存预警数", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.disabled = true;
      this.$refs[formName].validate(valid => {
        if (valid) {
          new Promise((resolve, reject) => {
            for (let i in this.DeviceData.devicePropertyValue) {
              if (
                this.DeviceData.devicePropertyValue[i].formValue.constructor ==
                Array
              ) {
                console.log(
                  this.DeviceData.devicePropertyValue[i].formValue.join(";")
                );
                this.DeviceData.devicePropertyValue[i].formValue = this.DeviceData.devicePropertyValue[i].formValue.join(";")
              }
            }
            resolve();
          }).then(()=>{
            request({
              method: "post",
              url: this.$api.createDevice,
              data: this.DeviceData
            })
              .then(res => {
                if (res.code == "000000") {
                  this.$message.success("保存成功!");
                  this.goBack();
                } else {
                  this.disabled = false;
                  return false;
                }
              })
              .finally(() => {
                this.disabled = false;
                return false;
              });
          });
        }
      });
    },
    goBack() {
      this.$router.go(-1); //返回上一层
    },
    getGenerateCode() {
      //获取分类编码
      request({
        url: this.$api.getDeviceGenerateCode,
        method: "get"
      }).then(res => {
        this.DeviceData.code = "SB" + res.data;
      });
    },
    getSortPropertyDetail(typeId) {
      request({
        url: this.$api.getDeviceSortPropertyDetail + `?id=${typeId}`,
        method: "get"
      }).then(res => {
        console.log(res);
      });
    },
    getAllSort() {
      request({
        url: this.$api.queryAllSort,
        method: "get"
      }).then(res => {
        console.log(res);
        this.optiions = res.data;
      });
    },
    handleChange(value) {
      let typeId = (this.DeviceData.typeId = value[value.length - 1]);
      request({
        url: this.$api.getDeviceSortPropertyDetail + `?typeId=${typeId}`,
        method: "get"
      }).then(res => {
        this.loadForm = res.data;
        console.log(res);
        let reSetAttrList = [];
        for (let item of res.data) {
          let newItem = {
            formValue: "",
            formType:item.formName,
            sortPropertyId: item.id,
          };
          if (item.formName == "checkbox") {
            reSetAttrList.push({
              formValue: [],
              formType:item.formName,
              sortPropertyId: item.id
            });
          } else {
            reSetAttrList.push(newItem);
          }
        }
        this.DeviceData.devicePropertyValue = reSetAttrList;
      });
    },
    toArray(string) {
      return string.split(";");
    },
    setSupplierId(data) {
      this.DeviceData.supplierId = data.id;
    }
  },
  mounted() {
    this.LevConfig = config.SecretLevel;
    this.StaConfig = config.DeviceStatus;
    this.getGenerateCode();
    this.getAllSort();
  },
  computed: {
    //上级菜单
    typeName: function() {
      if (this.$store.getters.treeData.ref !== "flxx") {
        return this.DeviceData.typeName;
      } else {
        this.DeviceData.typeId = this.$store.getters.treeData.id;
        return (this.$refs.flxx.value = this.DeviceData.typeName = this.$store.getters.treeData.val);
      }
    },
    departmentName: function() {
      if (this.$store.getters.treeData.ref !== "czbm") {
        return this.DeviceData.departmentName;
      } else {
        this.DeviceData.departmentId = this.$store.getters.treeData.id;
        return (this.$refs.czbm.value = this.DeviceData.departmentName = this.$store.getters.treeData.val);
      }
    },
    storageName: function() {
      if (this.$store.getters.treeData.ref !== "ccwz") {
        return this.DeviceData.storageName;
      } else {
        this.DeviceData.storageId = this.$store.getters.treeData.id;
        return (this.$refs.ccwz.value = this.DeviceData.storageName = this.$store.getters.treeData.val);
      }
    }
  }
};
</script>
<style scoped>
.info-ruleForm {
  width: 420px;
  position: relative;
}

.login-log {
  position: absolute;
  right: 0;
  top: 0;
  border-left: 1px solid #f6f6f6;
  border-bottom: 1px solid #f6f6f6;
  color: #999;
  border-radius: 0 0 0 3px;
  background: #fff;
  z-index: 9;
}

.login-log p {
  padding: 5px 2rem;
  margin-bottom: 5px;
  margin-top: 0;
}

.login-log h4 {
  padding: 5px 2rem;
  margin-bottom: 5px;
  margin-top: 5px;
  font-size: 16px;
  color: #333;
}

.login-log hr {
  margin: 0;
}

.authList {
  border: 1px solid #f2f2f2;
  padding: 0.5rem 1rem;
}

.del-query-tree-btn {
  position: absolute;
  right: -40px;
  top: 0;
}

.item-in-asstes {
  padding-bottom: 2rem;
}

.el-radio {
  line-height: 32px;
}
</style>